<script setup lang="ts">
import type { PropType } from 'vue'
import { inject, onMounted, ref } from 'vue'
import type { Notice } from '@/types/types'
import enrollNotice from '@/api/enrollNotice'
import getMyEnrollNotice from '@/api/getMyEnrollNotice'

import { ElMessage } from 'element-plus';
import { userinfo } from '@/stores/counter';

const user = userinfo();
const isLogin = ref(false);

const { enrollingNotice } = enrollNotice()
const { gettingMyEnrollNotice } = getMyEnrollNotice()

const updateNotice = inject('updateNotice') as () => void

const props = defineProps({
    data: {
        type: Object as PropType<Notice>,
        required: true
    }
})

const parseYearTime = (time: number) => {
    const date = new Date(time * 1000);
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
};

const loading = ref(true)
const currentNoticeData = ref<Notice>(props.data)
const isEnrolled = ref(false)

const enroll = async () => {
    // 检验数据，确保无空
    for (const key in enrollData.value) {
        if (enrollData.value[key] === '') {
            ElMessage.error('请填写完整信息')
            return
        }
    }
    // // 检验手机号
    // if (!/^1[3456789]\d{9}$/.test(enrollData.value.contactWay as string)) {
    //     ElMessage.error('手机号格式错误')
    //     return
    // }
    const data = enrollData.value
    const status = await enrollingNotice(
        data.noticeId as number,
        data.job as string,
        data.contactWay as string,
        data.topic as string,
        data.reason as string
    )
    if (status) {
        const index = user.notices.findIndex((notice: Notice) => notice.id === data.noticeId)
        user.notices[index].curPeople += 1
        user.enrolledNotices.push(data.noticeId as number)
        updateNotice()
        isEnrolled.value = true
        resetData()
    }
}

const enrollData = ref({
    noticeId: currentNoticeData.value.id,
    contactWay: user.baseInfo.telephone,
    job: user.baseInfo.career,
    reason: ''
} as { [key: string]: string | number })

const resetData = () => {
    enrollData.value = {
        noticeId: currentNoticeData.value.id,
        contactWay: user.baseInfo.telephone,
        job: user.baseInfo.career,
        topic: '',
        reason: ''
    }
}

onMounted(async () => {
    if (!user.enrolledNotices) {
        await gettingMyEnrollNotice()
    }
    // 查找 user.enrolledNotices 中是否有当前 notice
    if(user.enrolledNotices) {
        isLogin.value = true;
        const index = user.enrolledNotices.findIndex((noticeId: number) => noticeId === currentNoticeData.value.id)
        if (index !== -1) {
            isEnrolled.value = true
        }
    }else {
        isLogin.value = false;
    }
    loading.value = false
})
</script>

<template>
    <div class="notice-container">
        <div class="notice-row">
            <div class="notice-holdtime-title">举办时间</div>
            <div class="notice-holdtime-content">{{ parseYearTime(currentNoticeData.createAt) }}</div>
        </div>
        <div class="notice-row">
            <div class="notice-holdtime-title">当前人数</div>
            <div class="notice-holdtime-content"><span class="post-cur">{{ currentNoticeData.curPeople }}</span><span
                    class="post-gang">/</span><span class="post-total">{{
                        currentNoticeData.maxPeople }}</span></div>
        </div>
        <div class="notice-row notice-content">
            {{ currentNoticeData.content }}
        </div>

        <el-form :model="enrollData" label-width="80px" class="notice-form" v-if="!isEnrolled && !loading && isLogin && currentNoticeData.status">
            <el-form-item label="微信号">
                <el-input v-model="enrollData.contactWay" />
            </el-form-item>
            <el-form-item label="职业">
                <el-input v-model="enrollData.job" />
            </el-form-item>
            <!-- <el-form-item label="主题">
                <el-input v-model="enrollData.topic" />
            </el-form-item> -->
            <el-form-item label="你的观点或故事">
                <el-input v-model="enrollData.reason" type="textarea" />
            </el-form-item>
        </el-form>
        <div class="notice-btn-div" v-if="!isEnrolled && !loading && isLogin && currentNoticeData.status">
            <el-button class="notice-btn font-xbs" @click="enroll">
                立即参加
            </el-button>
        </div>
        <div class="notice-btn-div" v-if="!currentNoticeData.status">
            招募已停止
        </div>
        <div class="notice-enrolled font-xbs" v-if="isEnrolled && !loading && isLogin">
            已参加
        </div>
    </div>
</template>

<style scoped>
.notice-enrolled {
    display: flex;
    justify-content: center;
    color: black;
    font-size: 24px;
}

.notice-form {
    max-width: 600px;
    margin-top: 40px;
}

.notice-btn-div {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.notice-btn {
    width: 80px;
    height: 28px;
    background-color: rgb(250, 205, 144);
    border-radius: 10px;
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s;
}

:deep(.el-form-item__label) {
    line-height: normal;
    justify-content: flex-start;
}
</style>